<template>
  <el-row class="aaa" style v-if="Object.keys(projectinfo).length !==0">
    <el-tabs v-if="tablist.length>0" tab-position="top" :value="tablist[0].code" @tab-click="tabClick">
      <!-- 循环加载一级tab -->
      <el-tab-pane v-for="(item, index) in tablist" :key="'tab' + index" :name="item.code">
        <div slot="label" style="text-align:center">
          <!-- <i class="el-icon-date"></i> -->
          <img style="width: 20px; height: 20px;" :src="item.iconimg" />
          <div style="height:20px;font-size:12px;margin-bottom:-20px">{{ item.name }}</div>
        </div>
        <!-- 如果有二级tab，则加载二级tab -->
        <el-tabs v-if=" item.children.length> 0" tab-position="top" @tab-click="subTabClick" :value="item.children[0].code">
          <el-tab-pane v-for="(o, indexSub) in item.children" :key="'subTab' + indexSub" :name="o.code">
            <div slot="label" style="height:30px;line-height:30px;">
              <!-- <i class="el-icon-date"></i> -->
              <el-row type="flex" justify="center">
                <el-col :span="10" style="padding-top:4px" type="flex" justify="end">
                  <el-row type="flex" justify="end"><img style="width: 20px; height: 20px;" :src="o.iconimg" /></el-row>
                </el-col>
                <el-col :span="24" type="flex" justify="start">{{ o.name }}</el-col>
              </el-row>
            </div> <!-- 加载tab内容 -->
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <el-row v-if="componentList.length>0">
      <el-col v-for="(componentTemp, componentIndex) in componentList" :span="componentTemp.spannum" :key="componentTemp.id + componentIndex">
        <component :is="componentTemp.code" :ref="componentTemp.code" :projectId="projectinfo.id" :moduleEditFlag="componentTemp.editflag" currentRole="PM"></component>
      </el-col>
    </el-row>
    <!-- <span v-else>您没有任何TAB权限</span> -->
  </el-row>
</template>

<script>
// 项目TAB
import headOfThisProject from './headOfThisProject'
import projectDetail from './projectDetail'
import speedOfProgress from './speedOfProgress'
import projectRiskAndProblem from './projectRiskAndProblem'
import projectOthersInfo from './projectOthersInfo'
import progressForProjectInfo from '../../progress/components/progressForProjectInfo'
import myGantt from '../../progress/components/myGantt'
// 进度管理
import pmStartApply from '../../pmStartApply/index'
import pmDelayApply from '../../pmDelayApply/index'
import pmPauseApply from '../../pmPauseApply/index'
import pmRecoveryApply from '../../pmRecoveryApply/index'
import pmMilepost from '../../pmMilepost'
import pmCancelApply from '../../pmCancelApply'
import pmFinishedApply from '../../pmFinishedApply/index'
import pmCloseApply from '../../pmCloseApply/index'
//
import pmCommunicationManage from '../../pmCommunicationManage/index'
import pmBudgetApply from '../../pmBudgetApply/index'
import pmContract from '../../pmContract/index'
import pmInvoiceApply from '../../pmInvoiceApply/index'
import pmReceiptApply from '../../pmReceiptApply/index'
import pmRecBill from '../../pmRecBill/index'
import pmCostIncome from '../../pmCostIncome/index'
import task from '../../progress/components/task'
import projectResource from './projectResource'
// 相关方
import pmStakeholder from '../../pmStakeholder'
import pmStakeholderEngagement from '../../pmStakeholderEngagement'
// 整合管理
import pmResourceArchives from '../../pmResourceArchives'
import pmCalendar from '../../pmCalendar'
import pmAttachment from '../../pmAttachment'
import pmChangeApply from '../../pmChangeApply'
// 采购
import pmPurchaseApply from '../../pmPurchaseApply'
import pmPurchaseContract from '../../pmPurchaseContract'
import pmPurchasePayment from '../../pmPurchasePayment'
// 问题
import pmProblems from '../../pmProblems'
// 资源管理
import pmTeam from '../../pmTeam'
import pmResourceApply from '../../pmResourceApply'
import pmResourceChange from '../../pmResourceChange'
// 风险管理
import pmRiskIdentify from '../../pmRiskIdentify'
import pmRiskResponses from '../../pmRiskResponses'
// 任务管理
import pmTask from '../../pmTask'
import pmTaskLog from '../../pmTaskLog'
// 统计
import pmTaskLogStatistics from '../../pmTaskLogStatistics'
import { getTabAndComponents } from '../../../../api/projectIndexInfo'
import { getAction, putAction, postAction } from '@tapui/utils/http'
// 项目工作量及计划
import taskProjectForPerson from '../../pmTaskLogStatistics/taskProjectForPerson'
export default {
  name: 'projectItemTab',
  // mixins: [mixin_list],
  components: {
    headOfThisProject,
    projectDetail,
    speedOfProgress,
    projectRiskAndProblem,
    projectOthersInfo,
    progressForProjectInfo,
    projectResource,
    myGantt,
    task,
    pmStakeholder,
    pmStakeholderEngagement,
    pmStartApply,
    pmDelayApply,
    pmPauseApply,
    pmRecoveryApply,
    pmMilepost,
    pmCancelApply,
    pmFinishedApply,
    pmCloseApply,
    pmCommunicationManage,
    pmBudgetApply,
    pmContract,
    pmInvoiceApply,
    pmReceiptApply,
    pmRecBill,
    pmCostIncome,
    pmResourceArchives,
    pmCalendar,
    pmAttachment,
    pmChangeApply,
    pmPurchaseApply,
    pmPurchaseContract,
    pmPurchasePayment,
    pmProblems,
    pmTeam,
    pmResourceApply,
    pmResourceChange,
    pmRiskIdentify,
    pmRiskResponses,
    pmTask,
    pmTaskLog,
    pmTaskLogStatistics,
    taskProjectForPerson
  },
  props: {
    projectinfo: {},
    projectRoleCode: Number
  },
  data() {
    return {
      tablist: [],
      projectinfos: {},
      ownProjectRoleCode: Number,
      isLoad: false,
      componentList: [],
      firstComponets: {}
    }
  },

  methods: {
    tabClick(param) {
      var componentListThat = []

      // 获取此tab下挂载的tab
      this.tablist.forEach(function formatter(value, i) {
        // 如获取点击的tab的二级tab
        if (value.code === param.name) {
          // 如果有子tab则加载子tab的第一个tab下挂载的组件
          if (value.children.length > 0) {
            var aaa = value.children[0]
            var bbb = aaa.componentsList
            componentListThat = value.children[0].componentsList
          } else {
            // 如果没有子TAB,则直接加载此tab下挂载的组件
            componentListThat = value.componentsList
          }
        }
      })
      this.componentList = componentListThat
      this.$nextTick(() => {
        var componentWidthCode = this.$refs[this.componentList[0].code][0]
        // debugger
        this.$refs[this.componentList[0].code][0].ownProjectId = this.projectinfo.id
        componentWidthCode.initParam()
      })
    },
    subTabClick(param) {
      // this.componentList = []
      var componentListThat = []
      // 获取此tab下挂载的vue组件
      this.tablist.forEach(function formatter(value, i) {
        if (value.children.length > 0) {
          value.children.forEach((item, index) => {
            console.log(item.code)
            if (item.code === param.name) {
              componentListThat = item.componentsList
            }
          })
        } else {
          if (value.code === param.name) {
            componentListThat = value.componentsList
          }
        }
      })
      this.componentList = componentListThat
      // 方法执行完毕获取此tab下的组件
      this.$nextTick(() => {
        debugger
        var componentWidthCode = this.$refs[this.componentList[0].code][0]
        // debugger
        // this.$refs[this.componentList[0].code][0].ownProjectId = this.projectinfo.id
        componentWidthCode.initParam()
      })
    },
    getTabAndComponentList(projectRoleCode) {
      getTabAndComponents({ projectRoleCode: this.projectRoleCode }).then(res => {
        if (res.statusCode === 200) {
          this.tablist = res.result
        }
        if (this.tablist.length === 0) {
          this.$tap.alert(`提示：抱歉，您不具备查看此项目的任何权限。`, 'warning')
        }
        // 取第一个作为默认选中
        if (this.tablist[0].children.length > 0) {
          this.componentList = this.tablist[0].children[0].componentsList
        } else {
          this.componentList = this.tablist[0].componentsList
        }
      })
    }
  },
  created() {},
  watch: {
    projectRoleCode(newValue, oldValue) {
      this.ownProjectRoleCode = newValue
      this.getTabAndComponentList(this.ownProjectRoleCode, this.projectinfo)
    },
    projectinfo(newValue, oldValue) {
      this.projectinfos = newValue
    }
  },
  mounted() {
    // 获取在此项目中的角色id
    this.getTabAndComponentList()
  }
}
</script>

<style scoped>
.aaa >>> .el-row {
  padding-bottom: 0px;
}
.aaa >>> .el-tabs__item {
  line-height: 15px;
  height: 30px;
}
.aaa >>> .el-tabs__nav-scroll {
  padding-bottom: 5px;
}
.aaa >>> .el-tabs__header {
  margin: 0 0 5px;
}
</style>
